<template>
    <div class="home-container">
        <banner :slides="bannerList" :interval="3000" />

        <div class="w1920 section">
            <div class="section-header">
                <p class="content-title">热门社团</p>
                <p class="goClubs" @click="goClubsList">查看更多 ></p>
            </div>
            <div class="card-container">
                <hot-clubs v-for="(e, i) in joinClubsList" :data="e" :key="i" @click="goClubs(e)" />
            </div>
        </div>

        <div class="w1920 section">
            <div class="section-header">
                <p class="content-title">热门活动</p>
                <p class="goClubs" @click="goActivitieList">查看更多 ></p>
            </div>
            <div class="card-container activitie-container">
                <activitie v-for="(e, i) in activitieList" :data="e" :key="i" />
            </div>
        </div>

        <div class="w1920 section">
            <div class="section-header">
                <p class="content-title">热门公告</p>
                <p class="goClubs" @click="goContentList">查看更多 ></p>
            </div>
            <div class="announcement-container">
                <div v-for="(e, i) in announcementList" :key="i" class="announcement-card" @click="goNoticeDetails(e)">
                    <div class="announcement-meta">
                        <span class="">
                            <span class="tag type-tag" v-if="e.type !== null">{{ e.type === '0' ? '公告' : '活动' }}</span>
                            <span v-if="e.isTop" class="tag top-tag">置顶</span>
                        </span>
                        <span class="date">{{ e.gmtCreate.substr(0, e.gmtCreate.lastIndexOf(":")) }}</span>
                    </div>
                    <p class="title">{{ e.title }}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Banner from "@/components/Banner/index.vue"
import HotClubs from "@/components/HotClubs/index.vue"
import Activitie from "@/components/Activitie/index.vue"
import { getAnnouncementList } from "@/api/cms/cms";

export default {
    components: {
        Banner,
        HotClubs,
        Activitie,
    },
    props: {
        bannerList: {
            type: Array,
            default: () => []
        },
        activitieList: {
            type: Array,
            default: () => []
        },
        announcementList: {
            type: Array,
            default: () => []
        },
        joinClubsList: {
            type: Array,
            default: () => []
        },
    },
    computed: {
    },
    data() {
        return {
        }
    },
    mounted() {
    },
    methods: {
        goNoticeDetails(e) {
            this.$router.push(`/noticeDetails?id=${e.id}`)
        },
        goClubsList() {
            this.$router.push("/clubsList")
        },
        goActivitieList() {
            this.$router.push("/activitieList")
        },
        goContentList() {
            this.$router.push("/contentList")
        },
        goClubs(e){
            this.$router.push(`/clubsDetails?id=${e.id}`)
        }
    },
    beforeDestroy() {
    }
}
</script>

<style scoped>
.home-container {
    background: #f8f9fa;
    padding-bottom: 40px;
}

.w1920 {
    max-width: 1920px;
    width: calc(100% - 40px);
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.section {
    background: white;
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.content-title {
    font-size: 24px;
    color: #333;
    font-weight: 600;
    margin: 0;
    padding-left: 12px;
    border-left: 4px solid #3db0e0;
    line-height: 1;
}

.goClubs {
    font-size: 14px;
    color: #3db0e0;
    cursor: pointer;
    transition: all 0.3s;
}

.goClubs:hover {
    color: #2a8bb2;
    text-decoration: underline;
}

.card-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.announcement-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    padding-bottom: 1px;
}

.announcement-card {
    background: white;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.announcement-card:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(61,176,224,0.12);
}

.announcement-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.type-tag {
    background: #bfdbfe;
    color: #1d4ed8;
}

.top-tag {
    background: #fecaca;
    color: #dc2626;
}

.date {
    font-size: 13px;
    color: #999;
}

.title {
    font-size: 15px;
    color: #333;
    margin: 0;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .w1920 {
        width: calc(100% - 20px);
        padding: 0 10px;
        margin: 20px auto;
    }
    
    .content-title {
        font-size: 20px;
    }
    
    .card-container {
        flex-direction: column;
    }
    
    .announcement-card {
        padding: 12px 15px;
    }
}
</style>